<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="author" content="lijinbo" />
    <title>125-css左侧固定宽度右侧自适应布局</title>
    <style>
      div {
        height: 100px;
        margin-bottom: 16px;
      }
      .left {
        background-color: red;
      }
      .right {
        background-color: blue;
      }

      .max1 {
        display: flex;
      }
      .max1 .left {
        width: 300px;
      }
      .max1 .right {
        flex-grow: 1;
      }

      .max2 {
        display: flex;
      }
      .max2 .left {
        flex-basis: 300px;
        flex-shrink: 0;
      }
      .max2 .right {
        flex-grow: 1;
      }

      .max3 {
        display: flex;
      }
      .max3 .left {
        width: 300px;
      }
      .max3 .right {
        width: calc(100% - 300px);
      }

      .max4 {
        display: grid;
        grid-template-columns: 300px 1fr;
      }
    </style>
  </head>
  <body>
    <h2>css 如何实现左侧固定 300px，右侧自适应的布局</h2>
    <ol>
      <li>
        <p>左侧 width: 300px; 右侧 flex-grow</p>
        <div class="max1">
          <div class="left"></div>
          <div class="right"></div>
        </div>
      </li>
      <li>
        <p>左侧 flex-basis: 300px; 右侧 flex-grow</p>
        <div class="max2">
          <div class="left"></div>
          <div class="right"></div>
        </div>
      </li>
      <li>
        <p>左侧 width: 300px; 右侧 width: calc(100% - 300px)</p>
        <div class="max3">
          <div class="left"></div>
          <div class="right"></div>
        </div>
      </li>
      <li>
        <p>方式二简写为 grid-template-columns: 300px 1fr;</p>
        <div class="max4">
          <div class="left"></div>
          <div class="right"></div>
        </div>
      </li>
    </ol>
  </body>
</html>
